<template>
  <div class="tudishouchu">
    <div class="tudishouchu_top">
      <div class="tudishouchu_top_text">
        土地收储情况
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData1"
        border
        height="340"
        style="width: 100%; margin-top: 10px;"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- <el-table-column
          align="center"
          label="序号"
          type="index"
          sortable
          min-width="80"
        >
        </el-table-column> -->
        <el-table-column
          prop="name"
          min-width="70px"
          align="center"
          label="类别"
        >
        </el-table-column>
        <el-table-column
          prop="ha"
          align="center"
          :formatter="rounding2"
          min-width="55px"
          label="面积(ha)"
        >
        </el-table-column>
        <el-table-column
          prop="mu"
          align="center"
          min-width="55px"
          :formatter="rounding"
          label="面积(亩)"
        >
        </el-table-column>
        <el-table-column
          prop="ration"
          align="center"
          min-width="40px"
          label="占比(%)"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 获取到表格的数据
      tableDatas: [
        {
          house: {
            key: "1-1",
            value: 1,
          },
          people: {
            key: "1-2",
            value: 2,
          },
          town: {
            key: "1-3",
            value: "1-3",
          },
          xzVillage: {
            key: "1-4",
            value: "1-4",
          },
          zrVillage: {
            key: "1-5",
            value: "1-5",
          },
        },
      ],

      // 表格的数据
      tableData1: [],

      // 表格的默认数据
      newTdscData: [
        {
          category: "",
          ha: 0,
          m2: 0,
          mu: 0,
          ration: 0,
          subCategory: "",
        },
        {
          category: "",
          ha: 0,
          m2: 0,
          mu: 0,
          ration: 0,
          subCategory: "",
        },
        {
          category: "",
          ha: 0,
          m2: 0,
          mu: 0,
          ration: 0,
          subCategory: "",
        },
      ],

      // 合计ha的值
      haAll: 0,
      // 合计mu的值
      muAll: 0,
      // 合计占比的值
      zhanbiAll: 0,
    };
  },
  methods: {
    rounding(row, colum) {
      return parseFloat(row[colum.property]).toFixed(2);
    },
    rounding1(row, colum) {
      return parseFloat(row[colum.property]).toFixed(1);
    },
    rounding2(row, colum) {
      return parseFloat(row[colum.property]).toFixed(3);
    },
    // 接口请求土地存储数据并处理
    getTudiscData() {
      console.log(this.tdscData, "土地收储的数据");

      this.newTdscData[0]["category"] = "已签订征地协议";
      this.newTdscData[0]["ha"] = this.tdscData.notOverHa.value;
      this.newTdscData[0]["m2"] = this.tdscData.notOver.value;
      this.newTdscData[0]["mu"] = this.tdscData.notOverMu.value;
      this.newTdscData[0]["ration"] = this.tdscData.notOverRatio.value;
      this.newTdscData[0]["subCategory"] = "未收储";

      this.newTdscData[1]["category"] = "已签订征地协议";
      this.newTdscData[1]["ha"] = this.tdscData.overHa.value;
      this.newTdscData[1]["m2"] = this.tdscData.over.value;
      this.newTdscData[1]["mu"] = this.tdscData.overMu.value;
      this.newTdscData[1]["ration"] = this.tdscData.overRatio.value;
      this.newTdscData[1]["subCategory"] = "已收储";

      this.newTdscData[2]["category"] = "其他";
      this.newTdscData[2]["ha"] = this.tdscData.otherAreaHa.value;
      this.newTdscData[2]["m2"] = this.tdscData.otherArea.value;
      this.newTdscData[2]["mu"] = this.tdscData.otherAreaMu.value;
      this.newTdscData[2]["ration"] = this.tdscData.otherAreaRatio.value;
      this.newTdscData[2]["subCategory"] = "其他";

      console.log(this.newTdscData, "newTdscData的值");

      let num = 0;
      this.newTdscData.forEach((item, index) => {
        if (index < this.newTdscData.length - 1) {
          num += Number(item.ration);
        } else {
          item.ration = Number((100 - num).toFixed(1));
        }
      });

      let newdata = {};
      this.newTdscData.forEach((item, index) => {
        if (!newdata[item.category]) {
          newdata[item.category] = {
            name: item.category,
            ha: item.ha,
            mu: item.mu,
            m2: item.m2,
            ration: item.ration,
            id: index + item.category,
            children: [
              {
                name: item.subCategory,
                id: index,
                ha: item.ha,
                m2: item.m2,
                mu: item.mu,
                ration: item.ration,
              },
            ],
          };
        } else {
          newdata[item.category].ha += item.ha;
          newdata[item.category].mu += item.mu;
          newdata[item.category].m2 += item.m2;
          newdata[item.category].ration += item.ration;
          newdata[item.category].children.push({
            name: item.subCategory,

            id: index,
            ha: item.ha,
            m2: item.m2,
            mu: item.mu,
            ration: item.ration,
          });
        }
      });
      console.log(newdata, "newdata");
      let dataarr = [];
      let sum = {
        id: "sum",
        mu: 0,
        ha: 0,
        ration: 0,
        name: "总计",
      };
      for (const i in newdata) {
        console.log(newdata[i], "iiii");
        dataarr.push(newdata[i]);
        sum.mu += Number(newdata[i].mu.toFixed(2));
        sum.ha += Number(newdata[i].ha.toFixed(3));
        sum.ration += Number(newdata[i].ration.toFixed(0));
      }
      dataarr.push(sum);

      // console.log(...newdata,'newdata');
      dataarr.forEach((item) => {
        console.log(item, "dataarr的值");
        if (item.name == "总计") {
          item.ration = item.ration.toFixed(0);
        } else {
          item.ration = item.ration.toFixed(1);
        }
        if (Number(item.ration) > 100) {
          // 当占比超过100时，都设置为100
          item.ration = 100;
        }
      });
      this.tableData1 = dataarr;
      delete this.tableData1[1].children;
      console.log(this.tableData1, "this.tableData1");

      // this.tableData1[0].Ha.value = this.tdscData.areaHa.value;
      // this.tableData1[0].Mu.value = this.tdscData.areaMu.value;
      // if (Number(this.tdscData.areaRatio.value) > 100) {
      //   this.tableData1[0].zhanbi.value = 100;
      // } else {
      //   this.tableData1[0].zhanbi.value = this.tdscData.areaRatio.value;
      // }

      // this.tableData1[1].Ha.value = this.tdscData.overHa.value;
      // this.tableData1[1].Mu.value = this.tdscData.overMu.value;
      // if (Number(this.tdscData.overRatio.value) > 100) {
      //   this.tableData1[1].zhanbi.value = 100;
      // } else {
      //   this.tableData1[1].zhanbi.value = this.tdscData.overRatio.value;
      // }

      // this.tableData1[2].Ha.value = this.tdscData.notOverHa.value;
      // this.tableData1[2].Mu.value = this.tdscData.notOverMu.value;
      // if (Number(this.tdscData.notOverRatio.value) > 100) {
      //   this.tableData1[2].zhanbi.value = 100;
      // } else {
      //   // this.tableData1[2].zhanbi.value = this.tdscData.notOverRatio.value;
      //   this.tableData1[2].zhanbi.value = (
      //     this.tdscData.areaRatio.value - this.tdscData.overRatio.value
      //   ).toFixed(1);
      // }

      // this.tableData1[3].Ha.value = this.tdscData.otherAreaHa.value;
      // this.tableData1[3].Mu.value = this.tdscData.otherAreaMu.value;
      // if (Number(this.tdscData.otherAreaRatio.value) > 100) {
      //   this.tableData1[3].zhanbi.value = 100;
      // } else {
      //   // this.tableData1[3].zhanbi.value = this.tdscData.otherAreaRatio.value;
      //   this.tableData1[3].zhanbi.value = (
      //     100 - this.tdscData.areaRatio.value
      //   ).toFixed(1);
      // }

      // // 合计
      // //   this.tableData1.forEach(item => {
      // //       console.log(item,"合计item的值");
      // //       this.haAll += item.Ha.value
      // //       this.zhanbiAll += item.zhanbi.value
      // //       this.muAll += item.Mu.value

      // //   });

      // //       this.tableData1[4].Ha.value = this.haAll
      // //       this.tableData1[4].Mu.value = this.muAll
      // //       this.tableData1[4].zhanbi.value = this.zhanbiAll

      // this.tableData1[4].Ha.value =
      //   this.tdscData.areaHa.value + this.tdscData.otherAreaHa.value;
      // this.tableData1[4].Mu.value =
      //   this.tdscData.areaMu.value + this.tdscData.otherAreaMu.value;
      // this.tableData1[4].zhanbi.value =
      //   this.tdscData.areaRatio.value + this.tdscData.otherAreaRatio.value;

      // if (Number(this.tableData1[4].zhanbi.value) > 100) {
      //   this.tableData1[4].zhanbi.value = 100;
      // } else {
      //   this.tableData1[4].zhanbi.value = this.tableData1[4].zhanbi.value;
      // }

      // this.tableData1[4].Ha.value = this.tableData1[4].Ha.value.toFixed(3);
      // this.tableData1[4].Mu.value = this.tableData1[4].Mu.value.toFixed(2);
      // this.tableData1[4].zhanbi.value = this.tableData1[4].zhanbi.value.toFixed(
      //   0
      // );
      // console.log(this.tableData1, "tableData1的值");
    },
    rounding(row, colum) {
      return parseFloat(row[colum.property]).toFixed(2);
    },
    rounding1(row, colum) {
      return parseFloat(row[colum.property]).toFixed(1);
    },
  },
  computed: {
    ...mapState("Sjsx", ["cunluoData", "tdscData"]),
  },
  watch: {},
  mounted() {
    this.getTudiscData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: rgba(14, 85, 238, 0.109) !important;
  border: 1px solid #466393cc;
}
::v-deep .el-table__body-wrapper {
  height: 290px !important;
}
// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(131, 166, 166, 0.1),
    rgba(131, 166, 166, 0.8),
    rgba(131, 166, 166, 0.1)
  );
}
// 滚动条里面的轨道(即背景颜色)
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  // background-color: #5b739b2b;
  background-color: rgba(41, 71, 89, 0.4);
}
::v-deep .el-table__header th,
::v-deep .el-table__header tr {
  // background-color: #17B3A3;
  color: #fff;
}
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: rgba(251, 251, 251, 0.109) !important;

  border: 0px solid #466393cc;
}
::v-deep .el-table__expand-icon {
  color: #fff;
}
/* 去掉中间数据的分割线 */
::v-deep .el-table__row > td {
  // border: 1px solid #466393cc;
}
/* 去掉上面的线 */
::v-deep .el-table th.is-leaf {
  // border: 1px solid #466393cc;
}
/* 去掉最下面的那一条线 */
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table__body tr {
  background-color: transparent !important;
  // background-color: #17B3A3;

  border: 1px solid #466393cc;
}
// .el-table__body tr:hover > td {
//     background-color: transparent !important;

//     border: 0px solid #134087;
// }
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #466393cc;
  border-left: 1px solid #466393cc;
  font-size: 18px;
}
::v-deep .el-table--border th.el-table__cell.gutter:last-of-type {
  border-bottom: 1px solid #466393cc;
}
::v-deep .el-table--border .el-table__cell,
::v-deep
  .el-table__body-wrapper
  .el-table--border.is-scrolling-left
  ~ .el-table__fixed {
  border-right: 0px solid #ebeef5;
  color: #fff;
}
::v-deep .el-table--border::after,
::v-deep .el-table--group::after,
::v-deep .el-table::before {
  content: "";
  position: absolute;
  background-color: #466393cc;
  z-index: 1;
}
::v-deep .el-table th.el-table__cell > .cell {
  padding-left: 5px;
  padding-right: 5px;
}
.tudishouchu {
  margin-bottom: 35px;
  .tudishouchu_top {
    background: url("../../../../../assets/images/home/top.png");
    background-size: cover;
    margin-top: 10px;
    .tudishouchu_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 24px;
      color: #ffffff;
    }
  }
}
</style>
